<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

		<title>Maps3 Demo</title>

		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	</head>

	<body>
		<div id="map" style="height:500px;width:500px"></div>
		
		<script type="text/javascript"><!--
			var bounds = new google.maps.LatLngBounds();

			var point1 = new google.maps.LatLng(37.660773,-122.534448);
			var point2 = new google.maps.LatLng(37.860773,-122.334448);

			bounds.extend(point1);
			bounds.extend(point2);

			var mapOpts = {
				mapTypeId: google.maps.MapTypeId.ROADMAP
				//center: new google.maps.LatLng(37.760773,-122.434448),
				//zoom: 14
			};
			var map = new google.maps.Map(document.getElementById("map"), mapOpts);

			map.fitBounds(bounds);

			var polyOpts1 = {
				fillColor: "#000000"
			};
			var polyOpts2 = {
				fillColor: "#00AAFF"
			};
			var polygon = new google.maps.Polygon(polyOpts1);
			var triangleCoords = [
				new google.maps.LatLng(37.7,-122.4),
				new google.maps.LatLng(37.8,-122.5),
				new google.maps.LatLng(37.75,-122.37)
			];
            polygon.setPath(triangleCoords);

            google.maps.event.addListener(polygon, "mousemove", function() {
                polygon.setOptions(polyOpts2);
            });

			var bgpolyOpts = {
				fillOpacity: 0.0,
				strokeOpacity: 1.0
			};
			var bgpoly = new google.maps.Polygon(bgpolyOpts);
			var squareCoords = [
  				new google.maps.LatLng(37.85, -122.51),
  				new google.maps.LatLng(37.85, -122.35),
  				new google.maps.LatLng(37.68, -122.35),
  				new google.maps.LatLng(37.68, -122.51)
  			];
  			bgpoly.setPath(squareCoords);
  			
			google.maps.event.addListener(bgpoly, "mousemove", function() {
				polygon.setOptions(polyOpts1);
			});
			
			var bgrectOpts = {
				fillOpacity: 0.0,
				strokeOpacity: 1.0,
				bounds: new google.maps.LatLngBounds(
					new google.maps.LatLng(-89.999, -179.999),
					new google.maps.LatLng(89.999, 179.999)
					//new google.maps.LatLng(-90, -180),
					//new google.maps.LatLng(90, 180)
				)
			};
			var bgrect = new google.maps.Rectangle(bgrectOpts);
  			
			google.maps.event.addListener(bgrect, "mousemove", function() {
				polygon.setOptions(polyOpts1);
			});

			//bgpoly.setMap(map);
			bgrect.setMap(map);
			polygon.setMap(map);

			var icon = new google.maps.MarkerImage(
					"http://www.mobca.st/img/reticle.png",
					null,
					null,
					new google.maps.Point(15,15));
			
			var mark = new google.maps.Marker({
				position: new google.maps.LatLng(37.7,-122.4),
			 });
			mark.setMap(map);
			mark.setIcon(icon);
		--></script>
	</body>
</html>
